App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();

    app.defineLayer("str-animation-layer", {
        render: function (next) {
            this.initProperty();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            var property = this.property;

            property.id = property.id || this.uid;
            var keyframes = this.data.keyframes = this.changeKeyframes(htmlTool.getOptGroups(this.slot));

            var parentCanvas = this._getCanvas();
            parentCanvas.setAnimationObj({
                id: property.id,
                keyframes: keyframes
            });
            this.data.attributeStr = this._createPropertyStr(property);
        },
        createKeyframe: function (time) {
            if (time.indexOf("%") !== -1) return parseFloat(time) / 100;
            return parseFloat(time);
        },
        /**
         * 将动画帧数组转为动画帧对象
         * @param {Array} optGroups 动画帧数组
         * [{ time: "0%", options: [{ key: "left", value: "12" }] }, { time: "1", options: [{ key: "left", value: "100" }] }, ]
         * 转化为
         * [
         *   { keyframetime: 0, left: "12", fn: "ease" },
         *   { keyframetime: 1, left: "100" }
         * ],
         */
        changeKeyframes: function (optGroups) {
            var result = [];
            for (var i = 0; i < optGroups.length; i++) {
                var optGObj = optGroups[i], obj = {};
                obj.keyframetime = this.createKeyframe(optGObj.time);
                obj.fn = optGObj.fn;
                var options = optGObj.options;
                for (var j = 0; j < options.length; j++) {
                    var opt = options[j];
                    obj[opt.key] = opt.value;
                }
                result.push(obj);
            }
            return result;
        },
    })
})